<template>
  <div class="_wz_cent_main" style="height: 100%;width: 100%;" :style="{backgroundColor:!!chartsData ? (!!chartsData.backColor ? chartsData.backColor : '#fff') : '#fff'}">
    <div :id="!!chartsData ? (!!chartsData.id ? chartsData.id : '唯一值id') : '唯一值id'" style="height: 100%;width: 100%;"></div>


  </div>
</template>
<script>


import {getCurrentInstance,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'

export default defineComponent({
  name: 'dashboard',//组件名称
  components: {},//组件引用
  props: ['dataConfiguration'],//接收来自父组件的数据
  setup (props) {

    // 变量全局化
    const echarts = getCurrentInstance()?.appContext.config.globalProperties.$echarts

    //监听
    watch(() => props.dataConfiguration,(news, old) => {
      nextTick(()=>{
        windowChanges()
      })
    },{deep: true});


    //变量
    const state = reactive({
      chartsYu:null,
      chartsData:null,
    });

    //窗口改变
    const  windowChanges = ()=>{
      // debugger;
      if(state.chartsYu != null && state.chartsYu != "" && state.chartsYu != undefined){
        toRaw(state.chartsYu).resize();
      }else{

        nextTick(()=>{
          initFun(state.chartsData);
        })
      }
    };

    //统计渲染图表
    const initFun = (data) => {

      // chartsYu
      if (state.chartsYu != null && state.chartsYu != "" && state.chartsYu != undefined) {
        toRaw(state.chartsYu).dispose();//销毁
      }
      var chartDom = document.getElementById(!!data.id ? data.id : '唯一值id');
      state.chartsYu = echarts.init(chartDom);
      var color = !!data.colors ? data.colors : [];




      let option = {
        // color:color,
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            pointer: {show: false},//不显示指针
            name: '数据描述',//数据描述
            type: 'gauge',
            startAngle: 225,//开始角度 0点在左中 逆时针 整数
            endAngle: -45,//结束角度 0点在左中  顺时针 负数
            min: 0,//最小值
            max: 240,//最大值
            itemStyle: {
              color: '#ff0',//填充区颜色
            },
            axisLine: {//区间颜色
              lineStyle: {
                width: 6,
                color: [
                  [0.25, '#FF6E76'],
                  [0.5, '#FDDD60'],
                  [0.75, '#58D9F9'],
                  [1, '#7CFFB2']
                ]
              }
            },
            progress: {//指针指导的区域之前 填充颜色
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#244E8F',//填充区 边框颜色
              }
            },
            detail: {
              formatter: '{value} % '//文字描述 单位
            },
            data: [{
              value: 50,//数据
              name: '数据名称'//名称
            }]
          }
        ]
      };

      //点击事件
      state.chartsYu.on('click', function (param) {
        //获取自定义变量barIds的值,barIds要和option的series里自定义的一样
        if(!!data.chartsClick){
          data.chartsClick(param);
        }
        // console.log(param)

      });



      toRaw(state.chartsYu).setOption(option);
      toRaw(state.chartsYu).resize();

    }

    //数据初始化
    const dataInit = (data) => {
      if(!!props.dataConfiguration && props.dataConfiguration.id){
        // state.chartsData = JSON.parse(JSON.stringify(state.dataConfiguration))
        state.chartsData = props.dataConfiguration;
      }else{
        state.chartsData = {
          "id":"dashboard",
          "width":'100%',
          "height":'100%',
          "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
          "backColor":"#fff",
          "dataList":{name:'名称1',value:20},
          size:70,
          withinSize:0,
          semiCircle:100,
        }
      }
    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")



      dataInit();
      nextTick(()=>{
        initFun(state.chartsData);
      })


      window.addEventListener('resize', windowChanges, false)
    })



    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")
    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">

</style>

